<template>
  <div>
    firstName: <input type="text" v-model="firstName"> <br>
    lastName: <input type="text" v-model="lastName"> <br>
    <h2>{{fullName}}</h2>
    <input type="text" v-model="fullName">
    <button @click="flag = !flag">销毁或创建组件</button>
    <TestCom v-if="flag" />
  </div>
</template>

<script>
import TestCom from './TestCom.vue'
export default {
  components: { TestCom },
  data() {
    return {
      firstName: '',
      lastName: '',
      flag: true
    }
  },
  computed: {
    fullName: {
      // 计算属性的get set不能写箭头函数，this指向汇有混乱问题
      // get: () => this.firstName + ' ' + this.lastName,
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(value) {
        console.log(value);
        const arr = value.split(' ')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  }
}
</script>